<template>
  <div>
    <!-- <div class="toptitle">角色列表</div> -->
    <el-form
      :inline="true"
      :model="formInline"
      class="demo-form-inline"
      @keyup.enter.native="search()"
    >
      <!-- <el-row :span="24">
        <el-col :span="8"> -->
      <el-form-item label="名称">
        <br />
        <br />
        <el-input
          v-model="formInline.storeName"
          clearable
          style="margin-left:-40px;width:200px"
        ></el-input>
      </el-form-item>
      <!-- </el-col>
        <el-col :span="8"> -->
      <el-form-item label="店主">
        <br />
        <br />
        <el-input
          v-model="formInline.storeOwnerName"
          clearable
          style="margin-left:-40px;width:200px"
        ></el-input>
      </el-form-item>
      <!-- </el-col>
        <el-col :span="8"> -->
      <el-form-item label="店长">
        <br />
        <br />
        <el-input
          v-model="formInline.storeManagerName"
          clearable
          style="margin-left:-35px;width:200px"
        ></el-input>
      </el-form-item>
      <!-- </el-col> -->
      <!-- </el-row>
      <el-row :span="24">
        <el-col :span="8"> -->
      <el-form-item label="法人">
        <br />
        <br />
        <el-input
          v-model="formInline.legalPerson"
          clearable
          style="margin-left:-40px;width:200px"
        ></el-input>
      </el-form-item>
      <!-- </el-col>
        <el-col :span="8"> -->
      <el-form-item label="手机">
        <br />
        <br />
        <el-input
          v-model="formInline.phone"
          clearable
          style="margin-left:-35px;width:200px"
        ></el-input>
      </el-form-item>
      <!-- </el-col>
        <el-col :span="8"> -->
      <el-form-item label="地址">
        <br />
        <br />
        <el-input
          v-model="formInline.storeAddressDetail"
          style="margin-left:-40px;width:200px"
          clearable
        ></el-input>
      </el-form-item>
      <!-- </el-col>
      </el-row>
      <el-row :span="24"> -->
      <!-- <el-col :span="8"> -->
      <el-form-item label="所属省">
        <br />
        <br />
        <el-input
          v-model="formInline.province"
          clearable
          style="margin-left:-50px;width:200px"
        ></el-input>
      </el-form-item>
      <!-- </el-col>
        <el-col :span="8"> -->
      <el-form-item label="所属市">
        <br />
        <br />
        <el-input
          v-model="formInline.city"
          clearable
          style="margin-left:-50px;width:200px"
        ></el-input>
      </el-form-item>
      <!-- </el-col>
        <el-col :span="8"> -->
      <el-form-item label="所属区">
        <br />
        <br />
        <el-input
          v-model="formInline.county"
          style="margin-left:-50px;width:200px"
          clearable
        ></el-input>
      </el-form-item>
      <!-- </el-col>
      </el-row>
      <el-row :span="24">
        <el-col :span="8"> -->

      <!-- </el-col>
          <el-col :span="8"> -->
      <el-form-item label="店铺授权编码">
        <br />
        <br />
        <el-input
          v-model="formInline.authCode"
          style="margin-left:-80px;width:200px"
          clearable
        ></el-input>
      </el-form-item>
      <!-- </el-col>
            <el-col :span="8"> -->
      <el-form-item label="经销商公司名">
        <br />
        <br />
        <el-input
          v-model="formInline.companyName"
          style="margin-left:-90px;width:200px"
          clearable
        ></el-input>
      </el-form-item>

      <!-- </el-col>

            <el-col :span="8"> -->
      <el-form-item v-if="userInfo.userType != '3'" label="所属大区">
        <br />
        <br />
        <el-input
          v-model="formInline.upOrgZone"
          style="margin-left:-60px;width:200px"
          clearable
        ></el-input>
      </el-form-item>
      <!--          
        </el-col>
           <el-col :span="8"> -->
      <el-form-item v-if="userInfo.userType != '3'" label="所属营销区域">
        <br />
        <br />
        <el-input
          v-model="formInline.baseName"
          style="margin-left:-60px;width:200px"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-form-item label="类型">
          <br />
          <br />
          <el-select
            v-model="formInline.storeType"
            clearable
            style="margin-left:-40px;width:200px"
          >
            <el-option label="全部" value></el-option>
            <el-option
              v-for="item in storeType"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form-item>
      <!-- </el-col>
          <el-col :span="8"> -->
      <el-form-item>
        <el-form-item label="支付信息">
          <br />
          <br />
          <el-select
            v-model="formInline.icbcSwitch"
            clearable
            style="margin-left:-70px;width:200px"
          >
            <el-option label="全部" value></el-option>
            <el-option label="已锁定" value="2"></el-option>
            <el-option label="未锁定" value="1"></el-option>
          </el-select>
        </el-form-item>
      </el-form-item>
      <!-- </el-col>
         <el-col :span="8"> -->
      <el-form-item>
        <el-form-item label="店铺状态">
          <br />
          <br />
          <el-select
            v-model="formInline.openStatus"
            clearable
            style="margin-left:-65px;width:200px"
          >
            <el-option label="全部" value></el-option>
            <el-option label="正常营业" value="1"></el-option>
            <el-option label="已闭店" value="0"></el-option>
          </el-select>
        </el-form-item>
      </el-form-item>
      <el-form-item label="订单客户编号">
        <br />
        <br />
        <el-input
          v-model="formInline.orderCustomerCode"
          style="margin-left:-95px;width:200px"
        />
      </el-form-item>
      <!-- </el-col> -->
      <!-- <el-col :span="8">
          <el-form-item></el-form-item>
        </el-col> -->
      <!-- <el-col :span="8"> -->
      <el-form-item style="margin-left:850px;text-align:right">
        <el-button
          type="primary"
          @click="search()"
          size="mini"
          icon="el-icon-search"
          :disabled="dindanflagone"
          >查询</el-button
        >
        <el-button
          type="primary"
          @click="kong()"
          size="mini"
          icon="el-icon-delete"
          >清空</el-button
        >
        <el-button
          type="success"
          @click="exportExcel()"
          size="mini"
          icon="el-icon-s-data"
          >导出</el-button
        >
        <el-button
          type="primary"
          @click="showConfigTableDialog()"
          size="mini"
          icon="el-icon-setting"
          :loading="insertLoading"
          >列表配置</el-button
        >
      </el-form-item>
      <!-- </el-col>
      </el-row> -->
    </el-form>
    <el-table
      :data="tableData"
      border
      v-loading="loading"
      style="width: 100%"
      :header-cell-style="{ background: '#ebecf0', color: '#606266' }"
      @sort-change="handleSort"
    >
      <el-table-column
        type="index"
        width="60"
        label="序号"
        align="center"
      ></el-table-column>
      <el-table-column
        v-for="(item, index) in col"
        :key="`col_${index}`"
        :prop="dropCol[index].prop"
        :width="dropCol[index].width"
        :min-width="200"
        :label="item.label"
        align="center"
        :sortable="item.sortable"
      >
        <template slot-scope="scope">
          <div v-if="dropCol[index].prop === 'storeType'">
            <template v-for="item in storeType">
              <span
                v-if="scope.row.storeType == item.value"
                :key="item.value"
                >{{ item.label }}</span
              >
            </template>
          </div>
          <div v-if="dropCol[index].prop === 'openStatus'">
            <span v-if="scope.row.openStatus === 1">正常营业</span>
            <span v-if="scope.row.openStatus === 0">已闭店</span>
          </div>
          <div
            v-if="
              dropCol[index].prop != 'storeType' &&
                dropCol[index].prop != 'openStatus'
            "
          >
            {{ scope.row[dropCol[index].prop] }}
          </div>
        </template>
      </el-table-column>
      <!--
      <el-table-column prop="storeName" label="店铺名称" width="130" align="left"></el-table-column>
      <el-table-column prop="authCode" label="店铺授权编码" width="140" align="left"></el-table-column>
      <el-table-column label="店铺类型" prop="storeType" align="left" width="120">
        <template slot-scope="scope">
          <span v-if="scope.row.storeType === 1">一代或二代店</span>
          <span v-if="scope.row.storeType === 2">三代店</span>
          <span v-if="scope.row.storeType === 3">四代店</span>
          <span v-if="scope.row.storeType === 4">体验店</span>
            <span v-if="scope.row.storeType === 5">专柜</span>
        </template>
      </el-table-column>
       <el-table-column label="店铺状态" prop="openStatus" align="left" width="120">
        <template slot-scope="scope">
          <span v-if="scope.row.openStatus === 1">正常营业</span>
          <span v-if="scope.row.openStatus === 0">已闭店</span>
         
        </template>
      </el-table-column>
         <el-table-column prop="upOrgZone" label="所属大区" width="130" align="left"></el-table-column>
      <el-table-column prop="baseName" label="所属营销区域" width="140" align="left"></el-table-column>
      <el-table-column prop="companyName" label="经销商公司名" align="left" width="140"></el-table-column>
      <el-table-column prop="legalPerson" label="法人" align="left" width="120"></el-table-column>
      <el-table-column prop="legalPersonPhone" label="法人手机号" align="left" width="120"></el-table-column>
      <el-table-column prop="storeOwnerName" label="店主姓名" align="left" width="120"></el-table-column>
      <el-table-column prop="storeOwnerPhone" label="店主手机号" align="left" width="120"></el-table-column>
      <el-table-column prop="storeAddressDetail" label="店铺详细地址" align="left" width="200"></el-table-column>
      <el-table-column prop="createTime" label="店铺申请时间" width="200"></el-table-column>
      <el-table-column prop="updateTime" label="店铺审核通过时间" width="200"></el-table-column>
      -->
      <el-table-column
        align="center"
        fixed="right"
        width="220"
        v-if="tableflag"
      >
        <template slot="header" slot-scope="scope">
          <span>
            操作<el-button
              @click="seewenhao(scope.row)"
              type="text"
              icon="el-icon-question"
              style="font-size:15px"
            ></el-button>
          </span>
        </template>
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="seedetailshop(scope.row)"
            type="text"
            fixed="right"
            >查看详情</el-button
          >
          <span v-if="flagdian">
            <el-button
              size="mini"
              @click="edit(scope.row)"
              type="text"
              v-if="
                scope.row.reviewStatus == null ||
                  scope.row.reviewStatus == 5 ||
                  scope.row.reviewStatus == 3 ||
                  scope.row.reviewStatus == 4
              "
              >编辑</el-button
            >
          </span>
          <!-- v-if="scope.row.reviewStatus !== null && scope.row.reviewStatus !== '5'" -->
          <el-button size="mini" @click="seeshen(scope.row)" type="text"
            >查看进度</el-button
          >
          <!-- <el-button
            size="mini"
            @click="weihu(scope.row)"
            type="text"
       
          >店员维护</el-button> -->
          <el-button
            size="mini"
            @click="guanbi(scope.row)"
            type="text"
            v-if="scope.row.openStatus == 0 && flagdianone"
            >开店</el-button
          >
          <el-button
            size="mini"
            @click="guanbi(scope.row)"
            type="text"
            v-if="scope.row.openStatus == 1 && flagdianone"
            >关店</el-button
          >
          <el-button
            size="mini"
            @click="suo(scope.row)"
            type="text"
            v-if="scope.row.icbcSwitch == 2 && flagdianone"
            >解锁</el-button
          >
          <el-button
            size="mini"
            @click="suo(scope.row)"
            type="text"
            v-if="scope.row.icbcSwitch == 1 && flagdianone"
            >锁定</el-button
          >
          <el-button
            size="mini"
            @click="chongzhi(scope.row)"
            type="text"
            v-if="flagdianone"
            >重置密码</el-button
          >
          <el-button
            size="mini"
            type="text"
            v-if="flagdian"
            @click="
              $router.push({
                name: 'updateShopInfo',
                params: { detail: scope.row },
              })
            "
            >工商信息变更</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <div class="block" style="margin-top:2px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 50, 100]"
        :disabled="dindanflag"
        :current-page="listQuery.current"
        :page-size="listQuery.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>

    <!--列表配置-->
    <el-dialog :visible.sync="dialogVisiblewen" width="60%">
      <img width="100%" :src="this.wenpic" alt />
      <span slot="footer" class="dialog-footer">
        <!-- <el-button @click="dialogVisiblewen = false">取 消</el-button> -->
        <el-button type="primary" @click="dialogVisiblewen = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      title="列表配置"
      :visible.sync="configTableDialogVisible"
      width="50%"
      @close="closeConfigTableDialog()"
    >
      <div id="configTableDiv">
        <el-form :inline="true" :model="formInline2" class="demo-form-inline">
          <el-form-item label="选择列表字段：">
            <el-checkbox
              :indeterminate="formInline2.isIndeterminate"
              v-model="formInline2.isAll"
              style="margin-top:10px;"
              @change="isAllFieldChange"
              >全选</el-checkbox
            >
          </el-form-item>
          <el-divider></el-divider>
          <el-checkbox-group
            v-model="userMenuShowFields"
            @change="isSingleFieldChange"
          >
            <el-checkbox
              v-for="item in userMenuFieldList"
              :label="item.fieldCode"
              :key="item.fieldCode"
              style="margin:15px 10px;width:120px;"
              >{{ item.fieldName }}</el-checkbox
            >
          </el-checkbox-group>
        </el-form>
        <el-row>
          <el-col :span="24" style="text-align: center;margin-top: 30px">
            <el-button type="info" @click="closeConfigTableDialog()" size="mini"
              >取 消</el-button
            >
            <el-button
              type="primary"
              @click="insertUserFieldRelation()"
              size="mini"
              >确 认</el-button
            >
          </el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Sortable from 'sortablejs';
import {
  queryUserMenuFieldByParam,
  insertUserFieldRelation,
} from '@/api/tradeOrderSearch';
import {
  qryStore,
  queryReviewInfo,
  storeAdministration,
  paymentInformation,
  resetPwd,
  qryFaqConfigInfo,
} from '@/api/addShopapply';
import { getStoreExcel } from '@/api/download';
import qs from 'qs';
import { dict } from '../../dict';

export default {
  data() {
    return {
      listQuery: {
        current: 1,
        size: 10,
      },
      dialogVisiblewen: false,
      wenpic: '',
      tableflag: false,
      flagdianone: false,
      flagdian: false,
      allCol: [],
      col: [],
      dropCol: [],
      dindanflag: false,
      dindanflagone: false,
      formInline: {
        sortList: [],
        icbcSwitch: '',
        openStatus: '',
        companyName: '',
        upOrgZone: '',
        baseName: '',
        storeName: '',
        reviewStatus: '',
        storeType: '',
        storeOwnerName: '',
        storeManagerName: '',
        legalPerson: '',
        phone: '',
        storeAddressDetail: '',
        authCode: '',
        province: '',
        city: '',
        county: '',
        orderCustomerCode: '',
      },
      total: 0,
      data: [],
      loading: true,
      dialogVisibleorg: false,

      data5: [],
      data3: [],
      data4: [],
      defaultProps: {
        children: 'children',
        label: 'name',
      },
      openStatus: '',
      icbcSwitch: '',
      btnarr: [],
      arrid: [],
      arroneone: [],
      objone: {},
      tableData: [],
      multipleSelection: [],
      radio: '',
      rolefenid: '',
      selected: {},
      ruleForm: {
        name: '',
        region: '',
        sec: '',
        desc: '',
        state: '',
      },
      orgList: {},
      checkedarr: [],
      roleid: '',
      dialogVisibleone: false,
      dialogVisibletwo: false,
      dialogVisible: false,
      insertLoading: false,
      configTableDialogVisible: false, //列表配置弹窗状态
      formInline2: {
        isIndeterminate: false, //是否半选中
        isAll: true, //是否全部显示,
        menuCode: 'shopArchives',
      },
      userMenuFieldList: [], //全部列名列表
      userMenuAllFields: [], //全部的列名
      userMenuShowFields: [], //显示的列名
      userOldMenuShowFields: [], //原显示的列名
      arrone: [],

      rules: {
        name: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
        region: [
          { required: true, message: '请选择角色分类', trigger: 'blur' },
        ],
        state: [{ required: true, message: '请选择状态', trigger: 'change' }],
      },

      userInfo: {},
    };
  },
  computed: {
    storeType: () => dict.storeType,
  },
  mounted() {
    this.queryUserMenuFieldByParam(); //加载列表配置字段
    this.logininfo = localStorage.getItem('logininfo');
    this.userInfo = JSON.parse(this.logininfo);

    this.orgList = JSON.parse(this.logininfo).orgList;
    this.orgList.forEach((item, i) => {
      // 4-店主
      if (this.orgList[i].userType == 4) {
        this.flagdian = true;
      }
      if (this.orgList[i].userType == 1) {
        this.flagdianone = true;
      }
    });
    this._qryStore();

    document.body.ondrop = function(event) {
      event.preventDefault();
      event.stopPropagation();
    };
    // this.rowDrop()
    this.columnDrop();
  },
  methods: {
    //拖拽列表
    seewenhao() {
      this.dialogVisiblewen = !this.dialogVisiblewen;
      let data = {
        code: 5,
      };
      qryFaqConfigInfo(data).then((res) => {
        this.wenpic = res.result.faqContent;
      });
    },

    columnDrop() {
      const wrapperTr = document.querySelector('.el-table__header-wrapper tr');
      this.sortable = Sortable.create(wrapperTr, {
        animation: 180,
        delay: 0,
        onEnd: (evt) => {
          const oldItem = this.dropCol[evt.oldIndex - 1];
          this.dropCol.splice(evt.oldIndex - 1, 1);
          this.dropCol.splice(evt.newIndex - 1, 0, oldItem);
        },
      });
    },
    exportExcel() {
      let data = {
        size: this.listQuery.size,
        current: this.listQuery.current,
        condition: {
          storeName: this.formInline.storeName,
          reviewStatus: this.formInline.reviewStatus,
          storeType: this.formInline.storeType,
          orgSeq: this.orgList[0].orgSeq,
          icbcSwitch: this.formInline.icbcSwitch,
          openStatus: this.formInline.openStatus,
          companyName: this.formInline.companyName,
          baseName: this.formInline.baseName,
          upOrgZone: this.formInline.upOrgZone,
          storeOwnerName: this.formInline.storeOwnerName,
          storeManagerName: this.formInline.storeManagerName,
          legalPerson: this.formInline.legalPerson,
          phone: this.formInline.phone,
          storeAddressDetail: this.formInline.storeAddressDetail,
          authCode: this.formInline.authCode,
          province: this.formInline.province,
          city: this.formInline.city,
          county: this.formInline.county,
        },
        ascs: [],
        descs: [],
      };
      getStoreExcel(data)
        .then((res) => {
          const link = document.createElement('a');
          let blob = new Blob([res], { type: 'application/vnd.ms-excel' });
          link.style.display = 'none';
          //设置连接
          link.href = URL.createObjectURL(blob);
          link.download = '店铺列表.xlsx';
          document.body.appendChild(link);
          //模拟点击事件
          link.click();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    suo(v) {
      console.log(v, 'kk90');
      var msg = '';

      if (v.icbcSwitch === 1) {
        this.icbcSwitch = 2;
        msg = '锁定';
      } else if (v.icbcSwitch === 2) {
        this.icbcSwitch = 1;
        msg = '解锁';
      }
      let data = {
        uuid: v.uuid,
        isSwith: this.icbcSwitch,
      };
      this.$confirm(
        '确认对五粮液' + v.storeName + '执行' + msg + '操作吗？'
      ).then((_) => {
        paymentInformation(data).then((res) => {
          if (res.code == 1) {
            this.$message({
              showClose: true,
              message: res.message,
              type: 'success',
            });

            this._qryStore();
          } else if (res.code == 0) {
            this.$message({
              showClose: true,
              message: res.message,
              type: 'error',
            });
          }
        });
      });
    },

    chongzhi(v) {
      console.log(v, 'kk90');
      var msg = '重置密码';

      let data = {
        authCode: v.authCode,
      };
      this.$confirm(
        '确认对五粮液' + v.storeName + '执行' + msg + '操作吗？'
      ).then((_) => {
        resetPwd(data).then((res) => {
          if (res.code == 1) {
            this.$message({
              showClose: true,
              message: res.message,
              type: 'success',
            });

            this._qryStore();
          } else if (res.code == 0) {
            this.$message({
              showClose: true,
              message: res.message,
              type: 'error',
            });
          }
        });
      });
    },
    guanbi(v) {
      console.log(v, 'kk90');
      var msg = '';
      if (v.openStatus === 0) {
        this.openStatus = 1;
        msg = '开店';
      } else if (v.openStatus === 1) {
        this.openStatus = 0;
        msg = '关店';
      }
      let data = {
        uuid: v.uuid,
        openStatus: this.openStatus,
      };
      this.$confirm(
        '确认对五粮液' + v.storeName + '执行' + msg + '操作吗？'
      ).then((_) => {
        storeAdministration(data).then((res) => {
          if (res.code == 1) {
            this.$message({
              showClose: true,
              message: res.message,
              type: 'success',
            });

            this._qryStore();
          } else if (res.code == 0) {
            this.$message({
              showClose: true,
              message: res.message,
              type: 'error',
            });
          }
        });
      });
    },
    weihu(v) {
      this.$router.push({
        name: 'shopMembersetcopy',
        params: {
          orgSeq: v.orgSeq,
        },
      });
    },
    seeshen(v) {
      this.$router.push({
        name: 'applysteprest',
        params: {
          v: v,
        },
      });
    },
    edit(v) {
      console.log(v, 'kk');
      this.$router.push({
        name: 'addshopapplydetailcopy',
        params: {
          v: v,
          flagaddshop: true,
          restedit: true,
          flagdianji: true,
        },
      });
      //   let data = { uuid: v.reviewId };
      //   queryReviewInfo(data).then(res => {

      //   });
      localStorage.setItem('storeLng', v.storeLng);
      localStorage.setItem('storeLat', v.storeLat);
    },
    kong() {
      this.formInline.sortList = [];
      this.formInline.storeName = '';
      this.formInline.reviewStatus = '';
      this.formInline.companyName = '';
      this.formInline.storeType = '';
      this.formInline.upOrgZone = '';
      this.formInline.baseName = '';
      (this.formInline.storeOwnerName = ''),
        (this.formInline.storeManagerName = ''),
        (this.formInline.legalPerson = ''),
        (this.formInline.phone = ''),
        (this.formInline.storeAddressDetail = '');
      this.formInline.authCode = '';
      this.formInline.province = '';
      this.formInline.city = '';
      this.formInline.county = '';
      this.formInline.orderCustomerCode = '';
    },
    handleSizeChange(val) {
      this.listQuery.size = val;
      this.search();
    },
    handleCurrentChange(val) {
      this.listQuery.current = val;

      this.search();
    },
    search() {
      this.dindanflagone = true;
      this.listQuery.current = 1;
      let data = {
        size: this.listQuery.size,
        current: this.listQuery.current,
        condition: {
          sortList: this.formInline.sortList,
          storeName: this.formInline.storeName,
          reviewStatus: this.formInline.reviewStatus,
          storeType: this.formInline.storeType,
          orgSeq: this.orgList[0].orgSeq,
          icbcSwitch: this.formInline.icbcSwitch,
          openStatus: this.formInline.openStatus,
          companyName: this.formInline.companyName,
          baseName: this.formInline.baseName,
          upOrgZone: this.formInline.upOrgZone,
          storeOwnerName: this.formInline.storeOwnerName,
          storeManagerName: this.formInline.storeManagerName,
          legalPerson: this.formInline.legalPerson,
          phone: this.formInline.phone,
          storeAddressDetail: this.formInline.storeAddressDetail,
          authCode: this.formInline.authCode,
          province: this.formInline.province,
          city: this.formInline.city,
          county: this.formInline.county,
          orderCustomerCode: this.formInline.orderCustomerCode,
        },
        ascs: [],
        descs: [],
      };
      //  };
      qryStore(data).then((res) => {
        this.dindanflagone = false;
        this.tableData = res.records;
        this.total = res.total;
      });
    },

    _qryStore() {
      let data = {
        size: this.listQuery.size,
        current: this.listQuery.current,
        condition: {
          sortList: this.formInline.sortList,
          storeName: this.formInline.storeName,
          reviewStatus: this.formInline.reviewStatus,
          storeType: this.formInline.storeType,
          orgSeq: this.orgList[0].orgSeq,
          icbcSwitch: this.formInline.icbcSwitch,
          openStatus: this.formInline.openStatus,
          companyName: this.formInline.companyName,
          baseName: this.formInline.baseName,
          upOrgZone: this.formInline.upOrgZone,
          storeOwnerName: this.formInline.storeOwnerName,
          storeManagerName: this.formInline.storeManagerName,
          legalPerson: this.formInline.legalPerson,
          phone: this.formInline.phone,
          storeAddressDetail: this.formInline.storeAddressDetail,
          authCode: this.formInline.authCode,
          province: this.formInline.province,
          city: this.formInline.city,
          county: this.formInline.county,
        },
        ascs: [],
        descs: [],
      };

      qryStore(data).then((res) => {
        this.dindanflag = false;
        this.tableData = res.records;

        this.total = res.total;
        this.loading = false;
      });
    },
    seedetailshop(v) {
      this.$router.push({
        name: 'infoCaterMerchantscopy',
        params: {
          v: v,
          shen: false,
        },
      });
    },
    handleSizeChange(val) {
      this.listQuery.size = val;
      this._qryStore();
    },
    handleCurrentChange(val) {
      this.listQuery.current = val;
      this.dindanflag = true;
      this._qryStore();
    },
    showRow(row) {
      //赋值给radio
      this.radio = this.tableData.indexOf(row);
      this.selected = row;
    },
    //显示配置弹窗
    showConfigTableDialog() {
      this.userMenuShowFields = this.userOldMenuShowFields;
      let checkedCount = this.userMenuShowFields.length;
      this.formInline2.isAll = checkedCount === this.userMenuAllFields.length;
      this.formInline2.isIndeterminate =
        checkedCount > 0 && checkedCount < this.userMenuAllFields.length;
      this.configTableDialogVisible = true;
    },
    //关闭配置弹窗
    closeConfigTableDialog() {
      this.configTableDialogVisible = false;
      let data = {
        menuCode: this.formInline2.menuCode,
      };
    },
    queryUserMenuFieldByParam() {
      let data = {
        menuCode: this.formInline2.menuCode,
      };
      this.userMenuAllFields = []; //全部的列名
      this.userMenuShowFields = []; //显示的列名
      queryUserMenuFieldByParam(data).then((res) => {
        this.userMenuFieldList = res.records;
        this.userMenuFieldList.forEach((item, index) => {
          this.userMenuAllFields.push(item.fieldCode);
          if (item.isShow == 1) {
            this.userMenuShowFields.push(item.fieldCode);
          }
        });
        if (
          this.userMenuShowFields.length == 0 ||
          this.userMenuShowFields.length == this.userMenuAllFields.length
        ) {
          this.userMenuShowFields = this.userMenuAllFields;
          this.formInline2.isAll = true;
        } else {
          this.formInline2.isAll = false;
          this.formInline2.isIndeterminate = true;
        }
        this.insertUserFieldRelation(1);
        this.tableflag = true;
      });
    },
    getNewCol() {
      let data = {
        menuCode: this.formInline2.menuCode,
      };
      this.col = [];
      this.dropCol = [];
      queryUserMenuFieldByParam(data).then((res) => {
        this.userMenuFieldList = res.records;
        this.userMenuFieldList.forEach((item, index) => {
          if (item.isShow == 1) {
            this.col.push({ label: item.fieldName, prop: item.fieldCode });
            this.dropCol.push({ label: item.fieldName, prop: item.fieldCode });
          }
        });
        if (this.col.length == 0) {
          this.col = this.allCol;
          this.dropCol = this.allCol;
          this.formInline2.isAll = true;
        }
        this.col.forEach((item, index) => {
          if (item.prop == 'createTime') {
            this.$set(item, 'sortable', 'createTime');
          }
          if (item.prop == 'updateTime') {
            this.$set(item, 'sortable', 'updateTime');
          }
        });
      });
    },
    //保存显示字段
    insertUserFieldRelation(isInit) {
      if (
        this.userMenuShowFields == null ||
        this.userMenuShowFields.length == 0
      ) {
        this.$message({
          showClose: true,
          message: '列表字段不可为空',
          type: 'info',
        });
        return;
      }
      let data = {
        menuCode: this.formInline2.menuCode,
        fieldList: this.userMenuShowFields,
      };
      if (isInit == 1) {
        insertUserFieldRelation(data).then((res) => {
          if (res.code == 1) {
            this.userOldMenuShowFields = this.userMenuShowFields;
            this.closeConfigTableDialog();
            this.getNewCol();
          }
        });
        return;
      }
      this.insertLoading = true;
      insertUserFieldRelation(data).then((res) => {
        this.insertLoading = false;
        if (res.code == 1) {
          this.$message({
            showClose: true,
            message: res.message,
            type: 'success',
          });
          this.userOldMenuShowFields = this.userMenuShowFields;
          this.closeConfigTableDialog();
          this.getNewCol();
        } else {
          this.$message({
            showClose: true,
            message: res.message,
            type: 'error',
          });
        }
      });
    },
    //是否全选字段
    isAllFieldChange(val) {
      this.userMenuShowFields = val ? this.userMenuAllFields : [];
      this.formInline2.isIndeterminate = false;
    },
    //是否选中单个字段
    isSingleFieldChange(val) {
      let checkedCount = this.userMenuShowFields.length;
      this.formInline2.isAll = checkedCount === this.userMenuAllFields.length;
      this.formInline2.isIndeterminate =
        checkedCount > 0 && checkedCount < this.userMenuAllFields.length;
    },
    //获取字段勾选状态
    getUserMenuFieldStatus(fieldCode) {
      if (this.userMenuShowFields != null) {
        for (let i = 0; i < this.userMenuShowFields.length; i++) {
          if (this.userMenuShowFields[i] == fieldCode) {
            return true;
          }
        }
        return false;
      }
    },
    //是否显示字段
    isShow(fieldCode) {
      if (this.formInline2.isAll || this.getUserMenuFieldStatus(fieldCode)) {
        return true;
      } else {
        return false;
      }
    },
    handleSort(val) {
      let sortModel = '';
      if (val.order === 'ascending') {
        sortModel = 'ASC';
        if (val.prop == 'createTime') {
          this.formInline.sortList = [{ sort: 'asc', sortField: 'createTime' }];
          this.search();
        }
        if (val.prop == 'updateTime') {
          this.formInline.sortList = [{ sort: 'asc', sortField: 'updateTime' }];
          this.search();
        }
      } else if (val.order === 'descending') {
        sortModel = 'DESC';
        if (val.prop == 'createTime') {
          this.formInline.sortList = [
            { sort: 'desc', sortField: 'createTime' },
          ];
          this.search();
        }
        if (val.prop == 'updateTime') {
          this.formInline.sortList = [
            { sort: 'desc', sortField: 'updateTime' },
          ];
          this.search();
        }
      }
    },
  },
};
</script>
<style lang="less" scoped>
.demo-form-inline {
  //   border: 1px solid #ebeef5;
  padding: 20px 10px 3px 30px;
  margin-bottom: 0px;
}
.toptitle {
  border: 1px solid #e0e0e0;
  border-bottom: 2px solid #188097;
  background: #f5f5f5;
  line-height: 35px;
  margin-bottom: 10px;
  padding: 0 10px;
  font-size: 14px;
  font-weight: bold;
}
.limttable {
  width: 500px;
  float: left;
}

.limttree {
  display: inline-block;

  border-top: 48px solid rgb(238, 241, 246);
  width: 206px;
  margin-left: 150px;
}
.toptitle {
  border: 1px solid #e0e0e0;
  border-bottom: 2px solid #188097;
  background: #f5f5f5;
  line-height: 35px;
  margin-bottom: 10px;
  padding: 0 10px;
  font-size: 14px;
  font-weight: bold;
}
.limttreecontain {
  height: 260px;
  width: 200px;
  overflow: scroll;
  border: 1px solid #ccc;
}
.el-form-item {
  margin-bottom: 0px;
}
.el-row {
  margin-bottom: 0px;
}
</style>
